<template>
  <div class="order-list">
    <div class="order-list-top">
      <el-form ref="findList" :inline="true" :model="findList" label-width="100px" class="findList">
        <el-col :span="5">
          <el-form-item label="订单编号：" prop="goodsId" label-width="80px">
            <el-input v-model="findList.goodsId" placeholder="请输入订单编号" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="商品名称：" prop="goodsName" label-width="80px">
            <el-input v-model="findList.goodsName" placeholder="请输入商品名称" />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="下单时间：" prop="groundingTime" label-width="80px">
            <el-date-picker
              v-model="findList.groundingTime"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="dateCheck()"
            />
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit('findList')">查询</el-button>
            <el-button style="background:#F6F8F9" @click="resetForm('findList','hideForm')">重置</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <div
              style="text-align:right;width:135px;color:#1890FF;cursor: pointer;"
              @click="screenShow()"
            >
              <div v-show="screenFlag">
                <span>收起更多筛选条件</span>
                <i class="el-icon-arrow-up" />
              </div>
              <div v-show="!screenFlag">
                <span>查看更多筛选条件</span>
                <i class="el-icon-arrow-down" />
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
      <transition name="otherScreen">
        <el-form
          v-show="screenFlag"
          ref="hideForm"
          :inline="true"
          :model="hideForm"
          label-width="100px"
          class="otherScreen"
        >
          <el-form-item label="用户昵称：" prop="userName" label-width="80px">
            <el-input v-model="hideForm.userName" placeholder="请输入用户昵称" />
          </el-form-item>
          <el-form-item label="用户手机：" prop="userId" label-width="80px">
            <el-input v-model="hideForm.userId" placeholder="请输入用户手机" />
          </el-form-item>
          <el-form-item label="价格区间：" prop="priceRangeLeft" label-width="80px">
            <el-input
              v-model="hideForm.priceRangeLeft"
              placeholder="输入最低金额"
              class="wid149hei36"
              @blur="inputPriceJudge()"
            />
          </el-form-item>
          <span style="margin-left:8px">～</span>
          <el-form-item prop="priceRangeRight" style="margin-left:8px">
            <el-input
              v-model="hideForm.priceRangeRight"
              placeholder="请输入最高金额"
              class="wid149hei36"
              @blur="inputPriceJudge()"
            />&ensp;元
          </el-form-item>
        </el-form>
      </transition>
    </div>
    <div v-loading="disabled" class="order-list-content">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        text-color="#3C4353"
        active-text-color="#1182FB"
        @select="handleSelect"
      >
        <el-menu-item style="font-size:14px;" index>全部订单</el-menu-item>
        <el-menu-item style="font-size:14px;" index="01500001">等待买家付款</el-menu-item>
        <el-menu-item style="font-size:14px;" index="01500002">等待发货</el-menu-item>
        <el-menu-item style="font-size:14px;" index="01500003">已发货</el-menu-item>
        <el-menu-item style="font-size:14px;" index="01500004">已完成</el-menu-item>
        <el-menu-item style="font-size:14px;" index="01500006">已关闭</el-menu-item>
      </el-menu>
      <table border="0" cellpadding="0" cellspacing="0" align="center">
        <thead>
          <tr>
            <th>商品</th>
            <th>商品单价</th>
            <th>数量</th>
            <th>活动优惠</th>
            <th>买家</th>
            <th>交易状态</th>
            <th>商品总价</th>
          </tr>
        </thead>
        <tbody v-show="backMoneyList.length>0">
          <template v-for="item in backMoneyList">
            <tr :key="item.goodsId" style="height:10px;" />
            <tr :key="item.backId">
              <td colspan="8">
                <div class="content-title">
                  <div>
                    <span>订单编号：</span>
                    <div>{{ item.id }}</div>
                  </div>
                  <div>
                    <span>创建时间：</span>
                    <div>{{ item.createDate|filterDate }}</div>
                  </div>
                  <div class="content-title-flag">
                    <div
                      style="width:22px;height:22px;"
                      @click="dialogFormVisible = true;remarks =item.shopRemarks;remarksId=item.id"
                    >
                      <el-tooltip
                        v-if="item.shopRemarks"
                        class="item"
                        effect="light"
                        placement="top-end"
                        popper-class="tips"
                      >
                        <div
                          slot="content"
                          class="test-o"
                          style="max-width:212px;"
                        >{{ item.shopRemarks?item.shopRemarks:'' }}</div>
                        <img :src="require('@/assets/images/icon-flag-true.png')" alt>
                      </el-tooltip>
                      <img v-else :src="require('@/assets/images/icon-flag-false.png')" alt>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr :key="item.orderId" class="content-list-tr" @mouseenter="enter" @mouseleave="leave">
              <td>
                <div v-for="(list,i) in item.orderMdse" :key="i">
                  <div class="content-list-img">
                    <el-image
                      style="min-width: 80px;max-width:80px; height: 80px"
                      :src="qnPath(list.image)"
                      fit="fill"
                    >
                      <div slot="error" class="image-slot">
                        <img style="min-width: 80px;max-width:80px; height: 80px" :src="require('../../assets/images/background-upload-false.png')" alt="">
                      </div>
                    </el-image>
                    <div>
                      <div style="cursor:pointer;" @click="toDetail(item.id)">{{ list.name }}</div>
                      <p>规格：{{ list.propertyValueName }}</p>
                    </div>
                  </div>
                </div>
              </td>
              <td>
                <div v-for="(list,i) in item.orderMdse" :key="i">
                  <span>{{ list.unitPrice|fixedPrice }}</span>
                  <!-- <br /> -->
                  <!-- <del v-if="list.unitPrice?true:false">￥{{ list.oneOldPrice }}</del> -->
                </div>
              </td>
              <td>
                <div v-for="(list,i) in item.orderMdse" :key="i">
                  <span>{{ list.buyNum }}</span>
                </div>
              </td>
              <td>
                <div
                  v-for="(list,index) in item.orderMdse"
                  :key="index"
                  style="text-align:left;margin-left:20%;"
                >
                  <template v-for="(data,i) in item.coupon">
                    <h4
                      v-if="data.name"
                      v-show="index<=0"
                      :key="i"
                      style="margin-top:0;"
                      class="full-reduction"
                    >
                      -{{ ' ' }}{{ data.value|fixedPrice }}
                      <span>{{ data.name }}</span>
                    </h4>
                    <h4 v-else v-show="index<=0" :key="i+99999" style="font-weight:400;">未使用</h4>
                  </template>
                </div>
              </td>
              <td>
                <div v-for="(list,i) in item.orderMdse" :key="i">
                  <div v-show="i<=0" v-if="item.buyer">{{ item.buyer }}</div>
                  <div v-show="i<=0" v-else>{{ item.phone|phoneChange }}</div>
                  <div v-show="i<=0||item.remindSend" style="padding-top:10px;">
                    <router-link :to="{name: 'Chat', query: {to: item.phone}}"><img style="width:63px;height:20px;cursor:pointer;" :src="require('@/assets/images/icon-btn-callme.png')" alt></router-link>
                  </div>
                </div>
              </td>
              <td>
                <div v-for="(list,i) in item.orderMdse" :key="i">
                  <div v-show="i<=0" v-if="!item.orderperiodization" class="content-list-last">
                    <router-link to="/order/detail">
                      <span
                        v-if="item.orderStatus==='01500002'?true:false"
                        style="color:#E9433A;"
                      >{{ item.orderStatus|filterRefundStatus }}</span>
                      <span v-else>{{ item.orderStatus|filterRefundStatus }}</span>
                      <el-tooltip
                        v-show="item.remindSend"
                        class="item"
                        effect="dark"
                        :content="item.remindSend"
                        placement="top"
                      >
                        <div style="display:inline-block;position:relative;top:3px;">
                          <img :src="require('@/assets/images/icon-clock.png')">
                        </div>
                      </el-tooltip>
                    </router-link>
                  </div>
                  <p v-show="i<=0" style="color:#F56A6D;margin-top:10px;">
                    <a @click="toDetail(item.id)">
                      <el-link type="primary" :underline="false">详情</el-link>
                    </a>
                  </p>
                </div>
              </td>
              <td>
                <div v-for="(list,i) in item.orderMdse" :key="i">
                  <div v-show="i<=0" style="font-weight:600;">{{ item.amount|fixedPrice }}</div>
                  <div
                    v-if="item.realFreight>0"
                    v-show="i<=0"
                    style="color:#838A9D;line-height:27px;"
                  >(含运费:{{ item.realFreight|fixedPrice }})</div>
                  <div
                    v-else
                    v-show="i<=0"
                    style="color:#838A9D;line-height:27px;"
                  >(含运费:{{ item.freight|fixedPrice }})</div>
                  <el-link
                    v-show="i<=0"
                    v-if="item.orderStatus==='01500001'?item.orderperiodization?false:true:false"
                    type="primary"
                    :underline="false"
                    @click="dialogChangePriceVisible=true;changePriceid=item.id;ChangeAllprice=item.realAmount / 100;freightPrice=item.realFreight / 100;nowWayToPay=item.orderType;"
                  >{{ '修改价格' }}</el-link>
                  <el-link
                    v-show="i<=0"
                    v-if="item.orderStatus==='01500002'?true:false"
                    type="primary"
                    :underline="false"
                    @click="sendGoddsMoment(item.orderId,item.id)"
                  >{{ '立即发货' }}</el-link>
                </div>
              </td>
            </tr>
            <tr
              v-if="item.orderperiodization&&item.orderperiodization[1]"
              :key="item.id"
              class="pre-pay-list"
              @mouseenter="enter"
              @mouseleave="leave"
            >
              <td>
                <div>阶段一：定金</div>
              </td>
              <td>
                <div>{{ item.orderperiodization[0].amount|fixedPrice }}</div>
              </td>
              <td style="text-align:center;">
                <div>{{ item.orderMdse[0].buyNum }}</div>
              </td>
              <td />
              <td />
              <td>
                <div>{{ item.orderperiodization[0].payStatus==='01600001'?"已付一期":"等待买家付款" }}</div>
              </td>
              <td>
                <div>{{ item.orderperiodization[0].amount|fixedPrice }}</div>
                <el-link
                  v-show="item.orderperiodization[0].payStatus==='01600002'?true:false"
                  type="primary"
                  :underline="false"
                  @click="dialogChangePriceVisible=true;payed0=item.orderperiodization[0].payStatus;payed1=item.orderperiodization[1].payStatus;nowWayToPay=item.orderType;freightPrice='';ChangeAllprice=parseFloat(item.orderperiodization[0].amount)/100;changePriceid=item.id;changePriceChildId=item.orderperiodization[0].id"
                >修改价格</el-link>
              </td>
            </tr>
            <tr
              v-if="item.orderperiodization&&item.orderperiodization[1]"
              :key="item.shopId"
              class="pre-pay-list"
              @mouseenter="enter"
              @mouseleave="leave"
            >
              <td>
                <div>阶段二：尾款</div>
              </td>
              <td>
                <div>{{ item.orderperiodization[1].amount|fixedPrice }}</div>
              </td>
              <td style="text-align:center;">
                <div>{{ item.orderMdse[0].buyNum }}</div>
              </td>
              <td />
              <td />
              <td>
                <div
                  v-if="item.orderperiodization[0].payStatus==='01600001'&&item.orderperiodization[1].payStatus==='01600002'"
                  style="color:#E9433A;"
                >{{ item.orderperiodization[1].payEndDate|countdown }}</div>
                <div v-else>未开始</div>
              </td>
              <td>
                <div>{{ item.orderperiodization[1].amount|fixedPrice }}</div>
                <div style="color:#838A9D;line-height:27px;">(含运费:{{ item.realFreight|fixedPrice }})</div>
                <el-link
                  v-show="item.orderperiodization[0].payStatus==='01600001'&&item.orderperiodization[1].payStatus==='01600002'?true:false"
                  type="primary"
                  :underline="false"
                  @click="dialogChangePriceVisible=true;payed0=item.orderperiodization[0].payStatus;payed1=item.orderperiodization[1].payStatus;nowWayToPay=item.orderType;freight=item.freight;freightPrice=parseFloat(item.realFreight)/100;ChangeAllprice=parseFloat(item.orderperiodization[1].amount)/100;changePriceid=item.id;changePriceChildId=item.orderperiodization[1].id"
                >修改价格</el-link>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
      <div v-show="backMoneyList.length<=0" class="none">
        <div>
          <el-image :src="require('../../assets/images/none-order-list.png')" />
          <div style="font-weight:600;color:#3C4353;margin:16px 0 8px 0;font-size:18px;">暂无订单</div>
          <div>您还没有相关订单哦~</div>
        </div>
      </div>
      <!-- 分页 -->
      <div v-show="backMoneyList.length>0" class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="muchData"
          layout="prev, pager, next, sizes, jumper"
          :total="noticeCount"
          :hide-on-single-page="true"
          :page-sizes="[6,10, 20, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 遮罩层添加备注 -->
    <el-dialog title="添加备注" :visible.sync="dialogFormVisible">
      <div class="detail-change-remark">
        <div>备注内容：</div>
        <div class="detail-content">
          <el-input
            v-model="remarks"
            type="textarea"
            placeholder="请输入内容"
            maxlength="200"
            show-word-limit
            :autosize="{ minRows: 5, maxRows: 200}"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addRemarks()">确认添加</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 遮罩层修改价格 -->
    <el-dialog title="修改价格" :visible.sync="dialogChangePriceVisible" class="change-price-title">
      <template v-if="nowWayToPay === '02300001' || (nowWayToPay === '02300002' && payed0 === '01600001')">
        <div class="change-price">
          <div v-if="nowWayToPay === '02300002'" style="width:70px;line-height:36px;text-align:right;color:#838A9D;">商品尾款：</div>
          <div v-else style="width:70px;line-height:36px;text-align:right;color:#838A9D;">商品总价：</div>
          <div class="detail-content">
            <el-input
              v-model="ChangeAllprice"
              placeholder="请输入商品总价"
              @change="validataPrice(ChangeAllprice,'ChangeAllprice')"
            />
            <span class="position-yuan">元</span>
          </div>
        </div>
        <div class="change-price">
          <div style="width:70px;line-height:36px;text-align:right;color:#838A9D;">运费：</div>
          <div class="detail-content">
            <el-input
              v-model="freightPrice"
              placeholder="请输入运费"
              @change="validataPrice(freightPrice,'freightPrice')"
            />
            <span class="position-yuan">元</span>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="change-price">
          <div style="width:70px;line-height:36px;text-align:right;color:#838A9D;">商品总价：</div>
          <div class="detail-content">
            <el-input
              v-model="ChangeAllprice"
              placeholder="请输入商品总价"
              @change="validataPrice(ChangeAllprice,'ChangeAllprice')"
            />
            <span class="position-yuan">元</span>
          </div>
        </div>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changePrice()">确认</el-button>
        <el-button @click="dialogChangePriceVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 遮罩层立即发货 -->
    <el-dialog title="发货" :visible.sync="dialogMomentSendGodds" class="moment-send-goods-title">
      <div class="moment-send-goods">
        <div class="send-goods-title">
          <div>
            <span>收货人：</span>
            <p>{{ sendGoods.name }}</p>
          </div>
          <div>
            <span>收货地址：</span>
            <p>{{ sendGoods.receivingAddress }}</p>
          </div>
          <div>
            <span>联系电话：</span>
            <p>{{ sendGoods.phone|phoneChange }}</p>
          </div>
        </div>
        <el-form ref="sendGoods" :model="sendGoods" label-width="90px" :rules="rules">
          <el-form-item label="发货方式：">
            <el-select v-model="sendGoods.company.checked" placeholder="请选择物流方式">
              <el-option
                v-for="(item,i) in sendGoods.company.checkAbout"
                :key="i"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-show="sendGoods.company.checked!=='商家自送'"
            :label="sendGoods.company.checked==='快递发货'?'快递公司：':sendGoods.company.checked==='物流发货'?'物流公司：':''"
          >
            <el-select v-model="sendGoods.type.checked" placeholder="请选择快递公司">
              <el-option
                v-for="(item,i) in sendGoods.type.checkAbout"
                :key="i"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-show="sendGoods.company.checked!=='商家自送'" label="快递单号：" prop="express">
            <el-input v-model="sendGoods.express" autocomplete="off" placeholder="请输入快递单号" />
          </el-form-item>
          <el-form-item v-show="sendGoods.company.checked==='商家自送'" label="联系人：" prop="eName">
            <el-input v-model="sendGoods.eName" autocomplete="off" placeholder="请输入快递单号" />
          </el-form-item>
          <el-form-item v-show="sendGoods.company.checked==='商家自送'" label="联系电话：" prop="ePhone">
            <el-input v-model="sendGoods.ePhone" autocomplete="off" placeholder="请输入快递单号" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureSendGoods('sendGoods')">确认</el-button>
        <el-button @click="dialogMomentSendGodds = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getOrder, update, getExpressinfo, orderRestUpdate, updateperiodization } from '@/api/order';
import { getDate, getTime } from '@/utils/date';
import { mapGetters } from 'vuex';
import { phoneChange } from '@/utils/phone';
export default {
  filters: {
    countdown: value => {
      const momentTime = new Date();
      const nowtime = (momentTime.getTime() - 1000) / 1000; // 当前时间 毫秒数
      const totalSeconds = value / 1000 - nowtime;

      const day = parseInt(totalSeconds / 3600 / 24); // 天
      let hour = parseInt((totalSeconds / 3600) % 24); // 时
      let minute = parseInt((totalSeconds / 60) % 60); // 分
      let second = parseInt(totalSeconds % 60); // 秒
      hour = addZeroPrefix(hour);
      minute = addZeroPrefix(minute);
      second = addZeroPrefix(second);
      let residueTime =
        '还剩' + day + '天 ' + hour + '时 ' + minute + '分 ' + second + '秒';
      if (totalSeconds < 0) {
        residueTime = '时间到';
      }
      function addZeroPrefix(number) {
        return number < 10 ? `0${number}` : number;
      }
      return residueTime;
    },
    moneyWay: value => {
      let money = 0;
      for (let i = 0; i < value.length; i++) {
        money += value[i].freight / 100;
      }
      return money;
    },
    filterDate: function(value) {
      const date = new Date(value);
      return getDate(date) + ' ' + getTime(date);
    },
    // 过滤售后退款的退款状态
    filterRefundStatus: function(value) {
      switch (value) {
        case '01500001':
          return '等待买家付款';
        case '01500002':
          return '买家已付款';
        case '01500003':
          return '卖家已发货';
        case '01500004':
          return '交易成功';
        case '01500005':
          return '交易关闭';
        case '01500007':
          return '待退款';
        case '01500008':
          return '已退货';
        case '01500009':
          return '已评价';
        case '01500010':
          return '已删除';
        case '01500006':
          return '已失效';
        default:
          return '未知情况';
      }
    }
  },
  data() {
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入电话号码'));
      } else {
        const rst = /^1[3456789]\d{9}$/;
        if (rst.test(value)) {
          callback();
        } else {
          callback(new Error('请检查所输入的手机号是否正确！！！'));
        }
      }
    };
    var validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入联系人'));
      } else {
        const rst = /^[\u4e00-\u9fa5]+$/;
        if (rst.test(value)) {
          callback();
        } else {
          callback(new Error('请输入一个字以上汉字！'));
        }
      }
    };
    return {
      msg: '订单列表',
      findList: {
        goodsId: '',
        goodsName: '',
        groundingTime: ''
      },
      hideForm: {
        priceRangeLeft: '',
        priceRangeRight: '',
        userName: '',
        userId: ''
      },
      screenFlag: false,
      activeIndex: '',
      // 表格
      backMoneyList: [],
      // 价格区间字符串
      priceX: '',
      // 分页
      currentPage: 1,
      // 每页多少条
      muchData: 6,
      noticeCount: 0,
      // 当前页码
      momentPage: 1,
      // 遮罩层
      remarks: '',
      dialogFormVisible: false,
      remarksId: '',
      // 发货
      sendGoods: {
        name: '',
        receivingAddress: '',
        phone: '',
        id: '',
        company: {
          checked: '快递发货',
          checkAbout: [
            {
              name: '快递发货',
              id: '快递发货'
            },
            {
              name: '物流发货',
              id: '物流发货'
            },
            {
              name: '商家自送',
              id: '商家自送'
            }
          ]
        },
        type: {
          checked: '申通快递',
          checkAbout: []
        },
        express: '',
        eName: '',
        ePhone: ''
      },
      dialogMomentSendGodds: false,
      // 修改价格
      dialogChangePriceVisible: false,
      changePriceid: '',
      ChangeAllprice: '',
      changePriceChildId: '',
      freight: '',
      nowWayToPay: '', // 02300001 全额 02300002 定期
      payed0: '', // 是否支付了
      payed1: '', // 是否支付了
      freightPrice: '',
      flag: false,
      disabled: false,
      rules: {
        ePhone: [{ validator: validatePhone, trigger: 'blur' }],
        eName: [{ validator: validateName, trigger: 'blur' }]
      }
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  watch: {
    $route(to, from) {
      if (to.query.search) {
        this.getList(1, this.muchData, to.query.search);
      }
    }
  },
  created() {
    this.getTimeList();
    const to = this.$router.currentRoute.query;
    if (to.status) {
      this.activeIndex = to.status;
      this.handleSelect(this.activeIndex);
    } else if (to.search) {
      this.getList(1, this.muchData, to.search);
    } else {
      this.getList();
    }
  },
  beforeDestroy() {
    // 组件的销毁
    clearInterval(window.timeId); // 清除定时器
    window.timeId = null;
  },
  methods: {
    // hover test
    enter(e) {
      e.target.style.transition = 'background 0.3s';
      e.target.style.background = '#F2F7FF';
    },
    leave(e) {
      e.target.style.background = '#fff';
    },
    // 点击查询按钮
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.flag = true;
          this.priceChangeJudge();
          // 价格区间判断
          this.getList(
            1,
            this.muchData,
            this.findList.goodsId,
            this.findList.goodsName,
            this.findList.groundingTime
              ? new Date(this.findList.groundingTime[0]).getTime()
              : '',
            this.findList.groundingTime
              ? new Date(this.findList.groundingTime[1]).getTime()
              : '',
            this.activeIndex,
            this.hideForm.userName,
            this.hideForm.userId,
            this.priceX
          );
          this.momentPage = 1;
          this.currentPage = 1;
        } else {
          this.$message.error('提交失败');
          return false;
        }
      });
    },
    // 重置表单（表头）
    resetForm(formName, formSecond) {
      this.$refs[formName].resetFields();
      this.$refs[formSecond].resetFields();
      this.flag = false;
      this.getList();
    },
    // 隐藏显示更多筛选
    screenShow() {
      this.screenFlag = !this.screenFlag;
    },
    // 表单的位置
    handleSelect(key, keyPath) {
      this.activeIndex = key;
      // 价格区间判断
      this.disabled = true;
      this.flag
        ? this.getList(
          1,
          this.muchData,
          this.findList.goodsId,
          this.findList.goodsName,
          this.findList.groundingTime
            ? new Date(this.findList.groundingTime[0]).getTime()
            : '',
          this.findList.groundingTime
            ? new Date(this.findList.groundingTime[1]).getTime()
            : '',
          this.activeIndex,
          this.hideForm.userName,
          this.hideForm.userId,
          this.priceX
        )
        : this.getList(1, this.muchData, '', '', '', '', this.activeIndex);
      this.momentPage = 1;
      this.currentPage = 1;
    },
    // 判断输入价格
    inputPriceJudge() {
      if (!this.hideForm.priceRangeRight) {
        return;
      }
      if (
        parseFloat(this.hideForm.priceRangeLeft) >
        parseFloat(this.hideForm.priceRangeRight)
      ) {
        let flag = 0;
        flag = this.hideForm.priceRangeLeft;
        this.hideForm.priceRangeLeft = this.hideForm.priceRangeRight;
        this.hideForm.priceRangeRight = flag;
      }
    },
    // 获取列表
    getList(
      pageNo = 1,
      pageSize = 6,
      orderId = '',
      mdseName = '',
      startDate = '',
      endDate = '',
      status = '',
      nickName = '',
      phone = '',
      price = ''
    ) {
      this.priceChangeJudge();
      this.momentPage = pageNo;
      this.disabled = true;
      const param = {
        orderId,
        mdseName,
        startDate,
        endDate,
        status,
        pageNo,
        pageSize,
        nickName,
        phone,
        price,
        shopId: this.shopInfo.id
      };
      getOrder(param)
        .then(res => {
          this.backMoneyList = res.data.order;
          this.noticeCount = res.data.size;
          this.disabled = false;
          for (let i = 0; i < this.backMoneyList.length; i++) {
            if (this.backMoneyList[i].realAmount <= 0) {
              this.backMoneyList[i].realAmount = this.backMoneyList[i].amount;
            }
            if (this.backMoneyList[i].realFreight <= 0) {
              this.backMoneyList[i].realFreight = this.backMoneyList[i].freight;
            }
          }
        })
        .catch(res => {
          this.disabled = false;
          this.$message.error('获取列表失败，请刷新！');
        });
    },
    // 每页多少条
    handleSizeChange(val) {
      this.muchData = val;
      // 价格区间判断

      this.flag
        ? this.getList(
          this.momentPage,
          this.muchData,
          this.findList.goodsId,
          this.findList.goodsName,
          this.findList.groundingTime
            ? new Date(this.findList.groundingTime[0]).getTime()
            : '',
          this.findList.groundingTime
            ? new Date(this.findList.groundingTime[1]).getTime()
            : '',
          this.activeIndex,
          this.hideForm.userName,
          this.hideForm.userId,
          this.priceX
        )
        : this.getList(
          this.momentPage,
          this.muchData,
          '',
          '',
          '',
          '',
          this.activeIndex
        );
    },
    // 当前页码
    handleCurrentChange(val) {
      this.momentPage = val;
      // 价格区间判断

      this.flag
        ? this.getList(
          this.momentPage,
          this.muchData,
          this.findList.goodsId,
          this.findList.goodsName,
          this.findList.groundingTime
            ? new Date(this.findList.groundingTime[0]).getTime()
            : '',
          this.findList.groundingTime
            ? new Date(this.findList.groundingTime[1]).getTime()
            : '',
          this.activeIndex,
          this.hideForm.userName,
          this.hideForm.userId,
          this.priceX
        )
        : this.getList(
          this.momentPage,
          this.muchData,
          '',
          '',
          '',
          '',
          this.activeIndex
        );
    },
    // 倒计时
    getTimeList() {
      window.timeId = setInterval(() => {
        this.backMoneyList.forEach(item => {
          if (item.orderperiodization && item.orderperiodization[0]) {
            item.orderperiodization[1].payEndDate =
              parseFloat(item.orderperiodization[1].payEndDate) - 0.001;
          }
        });
      }, 1000);
    },
    toDetail(id) {
      sessionStorage.setItem('detailId', id);
      this.$router.push('/order/detail');
    },
    dateCheck() {
    },
    // 价格判断
    priceChangeJudge() {
      if (this.hideForm.priceRangeLeft && this.hideForm.priceRangeRight) {
        this.priceX = `${this.hideForm.priceRangeLeft * 100}～${this.hideForm
          .priceRangeRight * 100}`;
      } else if (
        this.hideForm.priceRangeRight &&
        !this.hideForm.priceRangeLeft
      ) {
        this.priceX = `0～${this.hideForm.priceRangeRight * 100}`;
      } else if (
        !this.hideForm.priceRangeRight &&
        this.hideForm.priceRangeLeft
      ) {
        this.priceX = `${this.hideForm.priceRangeLeft * 100}～999999999`;
      } else {
        this.priceX = '';
      }
    },
    // 验证修改价格输入框
    validataPrice(value, name) {
      const reg = /^\d+(\.\d+)?$/;
      if (!reg.test(value)) {
        this.$message({
          message:
            name === 'ChangeAllprice'
              ? `商品总价只能为数字型且为正数！`
              : name === 'freightPrice' ? `运费只能为数字型且为正数！` : '未知错误！！',
          type: 'error',
          showClose: true,
          duration: 4000
        });
        this[name] = '';
        return false;
      }
      this[name] = parseFloat(value).toFixed(2);
    },
    // 添加备注
    addRemarks() {
      // {id,realAmount//订单金额,shopRemarks//店铺备注}
      const param = {
        id: this.remarksId,
        shopRemarks: this.remarks
      };
      update(param).then(res => {
        if (res.code === '0000') {
          this.$message.success('修改备注成功！');
        } else {
          this.$message.error('修改备注失败！');
        }
        this.dialogFormVisible = false;
        this.getList(
          this.momentPage,
          this.muchData,
          this.findList.goodsId,
          this.findList.goodsName,
          this.findList.groundingTime
            ? new Date(this.findList.groundingTime[0]).getTime()
            : '',
          this.findList.groundingTime
            ? new Date(this.findList.groundingTime[1]).getTime()
            : '',
          this.activeIndex,
          this.hideForm.userName,
          this.hideForm.userId,
          this.priceX
        );
      });
    },
    // 列表立即发货
    sendGoddsMoment(value, id) {
      this.dialogMomentSendGodds = true;
      const param = {
        orderId: value
      };
      this.sendGoods.id = id;
      getExpressinfo(param).then(res => {
        this.sendGoods.name = res.data.userAddress.name;
        this.sendGoods.phone = phoneChange(res.data.userAddress.phone);
        this.sendGoods.receivingAddress = res.data.userAddress.receivingAddress;
        this.sendGoods.type.checkAbout = res.data.express;
      });
    },
    // 修改价格
    changePrice() {
      let param = {};
      if (this.nowWayToPay === '02300001') {
        param = {
          id: this.changePriceid,
          realAmount: parseFloat(this.ChangeAllprice) * 100,
          realFreight: parseFloat(this.freightPrice) * 100
        };
        if (!this.ChangeAllprice) {
          this.$message.error('商品总价不能为空！');
          return;
        } else if (!this.freightPrice) {
          this.$message.error('商品运费不能为空！');
          return;
        }
        update(param).then(res => {
          if (res.code === '0000') {
            this.$message.success('修改价格成功');
            this.flag
              ? this.getList(
                this.momentPage,
                this.muchData,
                this.findList.goodsId,
                this.findList.goodsName,
                this.findList.groundingTime
                  ? new Date(this.findList.groundingTime[0]).getTime()
                  : '',
                this.findList.groundingTime
                  ? new Date(this.findList.groundingTime[1]).getTime()
                  : '',
                this.activeIndex,
                this.hideForm.userName,
                this.hideForm.userId,
                this.priceX
              )
              : this.getList(
                this.momentPage,
                this.muchData,
                '',
                '',
                '',
                '',
                this.activeIndex
              );
          } else {
            this.$message.error('修改价格失败');
          }
          this.dialogChangePriceVisible = false;
        });
      } else if (this.nowWayToPay === '02300002') {
        if (this.payed0 === '01600002') {
          param = {
            id: this.changePriceChildId,
            realAmount: parseFloat(this.ChangeAllprice) * 100,
            realFreight: '',
            freight: '',
            orderId: this.changePriceid
          };
          if (!this.ChangeAllprice) {
            this.$message.error('商品定金不能为空！');
            return;
          }
        } else {
          param = {
            id: this.changePriceChildId,
            realAmount: parseFloat(this.ChangeAllprice) * 100,
            realFreight: parseFloat(this.freightPrice) * 100,
            freight: parseFloat(this.freight) * 100,
            orderId: this.changePriceid
          };
          if (!this.ChangeAllprice) {
            this.$message.error('商品尾款不能为空！');
            return;
          } else if (!this.freightPrice) {
            this.$message.error('商品运费不能为空！');
            return;
          }
        }
        updateperiodization(param).then(res => {
          if (res.code === '0000') {
            this.$message.success('修改价格成功');
            this.flag
              ? this.getList(
                this.momentPage,
                this.muchData,
                this.findList.goodsId,
                this.findList.goodsName,
                this.findList.groundingTime
                  ? new Date(this.findList.groundingTime[0]).getTime()
                  : '',
                this.findList.groundingTime
                  ? new Date(this.findList.groundingTime[1]).getTime()
                  : '',
                this.activeIndex,
                this.hideForm.userName,
                this.hideForm.userId,
                this.priceX
              )
              : this.getList(
                this.momentPage,
                this.muchData,
                '',
                '',
                '',
                '',
                this.activeIndex
              );
          } else {
            this.$message.error('修改价格失败');
          }
          this.dialogChangePriceVisible = false;
        });
      }
    },
    // 1立即发货确认按钮
    sureSendGoods(formName) {
      if (this.sendGoods.company.checked === '商家自送') {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.sureTwo();
          } else {
            this.$message.error('提交失败，请检查电话和用户名是否填写正确!!');
            return false;
          }
        });
      } else {
        if (this.sendGoods.express === '') {
          this.$message.error('请填写快递单号');
        } else {
          this.sureTwo();
        }
      }
    },
    // 2
    sureTwo() {
      this.dialogMomentSendGodds = false;
      // {"id":"","expressId":"快递单号","expressCompany":"快递公司","expressPhone":"快递电话","address":"地址","orderStatus":"01500003"}
      let param = {};
      if (this.sendGoods.company.checked === '商家自送') {
        param = {
          id: this.sendGoods.id,
          expressId: this.sendGoods.eName,
          expressCompany: this.sendGoods.company.checked,
          expressPhone: this.sendGoods.ePhone,
          orderStatus: '01500003',
          shopId: this.shopInfo.id
        };
      } else {
        param = {
          id: this.sendGoods.id,
          expressId: this.sendGoods.express,
          expressCompany: this.sendGoods.type.checked,
          orderStatus: '01500003',
          shopId: this.shopInfo.id
        };
      }
      orderRestUpdate(param)
        .then(res => {
          res.code === '0000'
            ? this.$message.success('发货成功')
            : this.$message.error('发货失败');
          this.sendGoods.type.checked = '';
          this.getList(
            this.momentPage,
            this.muchData,
            this.findList.goodsId,
            this.findList.goodsName,
            this.findList.groundingTime
              ? new Date(this.findList.groundingTime[0]).getTime()
              : '',
            this.findList.groundingTime
              ? new Date(this.findList.groundingTime[1]).getTime()
              : '',
            this.activeIndex,
            this.hideForm.userName,
            this.hideForm.userId,
            this.priceX
          );
          this.sendGoods.express = '';
          this.sendGoods.ePhone = '';
          this.sendGoods.eName = '';
        })
        .catch(res => {
          this.$message.error('发货失败！');
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.order-list {
  background: #f1f5f9;
  .order-list-top {
    border-radius: 3px;
    overflow: hidden;
    .el-form {
      min-width: 1660px;
      max-width: 100%;
      height: 70px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      padding: 10px;
      display: flex;
      align-items: center;
      .el-form-item {
        font-size: 14px;
        margin: 0;
        margin-left: 15px;

        .el-icon-arrow-down {
          color: #1890ff;
          width: 11px;
          height: 8px;
        }
        .el-input {
          height: 36px !important;
          border-radius: 4px;
          /deep/.el-input__inner {
            height: 36px;
          }
        }
        .el-select {
          /deep/.el-input__inner {
            height: 36px;
          }
        }
        .el-button {
          width: 80px;
          height: 34px;
          background: rgba(17, 130, 251, 1);
          border-radius: 3px;
          margin-top: 2px;
          padding: 0;
        }
        /deep/.el-form-item__label {
          padding: 0;
          color: #3c4353;
        }
      }
    }
    .otherScreen {
      height: 70px;
      width: 100%;
      background: #fff;
      padding-top: 0;
      transition: height 0.3s;
      .el-form-item {
        .el-date-editor {
          width: 224px;
          height: 36px;
          background: rgba(255, 255, 255, 1);
          border-radius: 4px;
          /deep/.el-input__inner {
            width: 224px !important;
            height: 36px !important;
          }
        }
        .wid149hei36 {
          width: 149px;
          /deep/.el-input__inner {
            width: 149px;
          }
        }
      }
    }
    .findList {
      display: flex;
      flex-flow: row nowrap;
    }
    //动画
    .otherScreen-enter-active,
    .otherScreen-leave-active {
      transition: opacity 0.5s;
    }
    .otherScreen-enter,
    .otherScreen-leave-to {
      opacity: 0;
    }
  }
  .order-list-content {
    margin-top: 10px;
    background-color: #fff;
    min-height: calc(100vh - 276px);
    .el-menu {
      .el-menu-item {
        height: 70px;
        margin: 0 13px;
        font-size: 16px;
        font-weight: 500;
        line-height: 70px;
        padding: 7px;
        margin-right: 40px;
        margin-left: 34px;
      }
    }
    table {
      font-size: 14px;
      background: #fff;
      width: 100%;
      padding: 20px 2% 0 2%;
      thead {
        background: #f6f8f9;
        th {
          height: 50px;
          font-weight: 600;
          border-top: 1px solid #dce1ee;
          border-bottom: 1px solid #dce1ee;
          &:first-child {
            text-align: left;
            text-indent: 40px;
            border-left: 1px solid #dce1ee;
          }
          &:last-child {
            border-right: 1px solid #dce1ee;
          }
        }
      }
      tbody {
        .content-title {
          background-color: #e8f1ff;
          height: 50px;
          line-height: 50px;
          padding-left: 40px;
          display: flex;
          font-weight: 600;
          border: 1px solid #e4e9ef;
          & > div {
            display: flex;
            flex-flow: row nowrap;
            margin-left: 80px;
            &:first-child {
              margin-left: 0;
            }
          }
          .content-title-flag {
            width: 22px;
            flex: 1;
            position: relative;
            & > div {
              position: absolute;
              cursor: pointer;
              right: 60px;
              top: 50%;
              margin-top: -20px;
            }
          }
        }
        .content-list-tr {
          td {
            border-left: 1px solid #e4e9ef;
            border-bottom: 1px solid #e4e9ef;
            text-align: center;
            min-height: 120px;
            & > div {
              min-height: 100px;
            }
            &:first-child {
              width: 420px;
              text-align: left;
              height: 125px;
              & > div {
                padding-left: 40px;
                p {
                  margin-top: 0;
                }
              }
            }
            &:last-child {
              border-right: 1px solid #e4e9ef;
            }
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3) {
              height: 125px;
              & > div {
                height: 125px;
                border-bottom: 1px solid #e4e9ef;
                padding-top: 20px;
                padding-bottom: 20px;
                &:last-child {
                  border-bottom: 1px solid #fff;
                }
              }
            }
            &:nth-child(2),
            &:nth-child(3) {
              border-left: none;
              & > div {
                min-height: 125px;
              }
            }
            &:nth-child(4) {
              width: 200px;
            }
            .content-list-img {
              display: flex;
              flex-flow: row nowrap;
              & > div {
                div {
                  margin-left: 20px;
                  line-height: 22px;
                }
                p {
                  margin-left: 20px;
                  padding-top: 10px;
                  color: #838a9d;
                }
              }
            }
          }
        }
      }

      .pre-pay-list {
        td {
          height: 70px;
          border-bottom: 1px solid #e4e9ef;
          &:first-child {
            border-left: 1px solid #e4e9ef;
          }
          &:last-child {
            border-right: 1px solid #e4e9ef;
          }
          &:nth-child(1) {
            padding-left: 40px;
          }
          &:nth-last-child(2),
          &:nth-last-child(1) {
            text-align: center;
          }
        }
      }
    }
    .none {
      display: flex;
      justify-content: center;
      width: 100%;
      min-height: 54vh;
      align-items: center;
      /deep/.el-image {
        width: 150px;
        height: 150px;
      }
      & > div {
        display: flex;
        align-items: center;
        flex-flow: column nowrap;
        font-size: 16px;
        color:#838A9D;
      }
    }
  }
}
.wait-loading {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(251, 255, 253, 0.2);
}
.content-list-last {
  display: flex;
  justify-content: center;
  span {
    margin-left: 3px;
  }
}
//分页
.pagination {
  margin-top: 18px;
  text-align: center;
  border-top: 1px solid #e4e9ef;
  padding-top: 28px;
  padding-bottom: 10px;
}
.main-product-icon {
  width: 77px;
  height: 20px;
  background: rgba(230, 247, 255, 1);
  border-radius: 11px;
  text-align: center;
  color: #1182fb;
}
.stock-less-icon {
  display: inline-block;
  width: 66px;
  height: 20px;
  text-align: center;
  position: relative;
  top: 5px;
  div {
    background: rgba(247, 87, 87, 1);
    border-radius: 10px;
    opacity: 0.1;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  span {
    display: inline-block;
    width: 100%;
    line-height: 20px;
    color: #e9433a;
    position: absolute;
    z-index: 1;
    left: 0;
    opacity: 0.8;
  }
}
//遮罩层
/deep/.el-dialog {
  width: 600px;
}
/deep/.el-dialog__header {
  border-bottom: 1px solid #eeeeee;
  font-weight: 600;
}
/deep/.el-dialog__body {
  padding: 32px 0 0 70px !important;
}
/deep/.el-dialog__footer {
  text-align: left;
  padding: 0 0 50px 140px;
}
.detail-change-remark {
  display: flex;
  .detail-content {
    width: 400px;
    height: 150px;
  }
  .el-input {
    width: 400px;
    height: 150px;
  }
}
//遮罩层发货
.moment-send-goods-title {
  font-weight: 400;
  .send-goods-title {
    background: #f6f8f9;
    padding: 20px 0 14px 52px;
    margin-bottom: 30px;
    & > div {
      display: flex;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      p {
        margin: 0;
      }
      span {
        width: 70px;
        display: inline-block;
        text-align: right;
      }
    }
  }
  .el-form {
    margin-left: 52px;
    /deep/.el-form-item__label {
      font-weight: 400;
    }
    /deep/.el-input__inner {
      width: 300px;
      height: 36px;
    }
  }
  /deep/.el-button {
    width: 100px;
    height: 36px;
    padding: 0;
    line-height: 36px;
  }
  /deep/.el-dialog {
    width: 500px;
  }
  /deep/.el-dialog__header {
    border-bottom: 1px solid #eeeeee;
    font-weight: 600;
  }
  /deep/.el-dialog__body {
    padding: 32px 11px 0 11px !important;
  }
  /deep/.el-dialog__footer {
    text-align: left;
    padding: 0 0 33px 146px;
  }
}
.change-price-title {
  .position-yuan {
    position: relative;
    left: -25px;
    color: #838a9d;
  }
  /deep/.el-input__inner {
    width: 160px;
    height: 36px;
    padding-right: 30px;
  }
  .change-price {
    display: flex;
    & > div {
      margin-bottom: 20px;
    }
    .detail-content {
      display: flex;
      line-height: 36px;
    }
  }
  //遮罩层
  /deep/.el-dialog {
    width: 310px;
  }
  /deep/.el-dialog__header {
    border-bottom: 1px solid #eeeeee;
    font-weight: 600;
  }
  /deep/.el-dialog__body {
    padding: 32px 0 0 40px !important;
  }
  /deep/.el-dialog__footer {
    text-align: left;
    padding: 0 0 50px 40px;
    /deep/.el-button {
      width: 100px;
      height: 36px;
      padding: 0;
      line-height: 36px;
      margin-right: 30px;
      margin-left: 0;
      position: relative;
      &:last-child {
        margin-right: 0;
        left: -4px;
      }
    }
  }
}
//折扣
.full-reduction {
  span {
    position: relative;
    background-color: #fa6400;
    padding: 3px 8px 3px 4px;
    font-size: 10px;
    margin-left: 10px;
    color: #fff;
    border-radius: 2px;
  }
  span::before {
    content: "";
    width: 0;
    height: 0;
    left: -7.5px;
    top: 7px;
    position: absolute;
    border-color: #fff;
    border-right-width: 5px;
    border-style: solid;
    border-right-color: #fa6400;
  }
}
</style>
